<template>
  <a-modal
    :width="1000"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> 创建发货单 </template>
    <div>
      <a-table
        :stripe="true"
        :dordered="{
          headerCell: true,
        }"
        :data="data"
        :scroll="scroll"
        :pagination="false"
      >
        <template #columns>
          <a-table-column :width="80" align="center">
            <template #title> 序号 </template>
            <template #cell="{ rowIndex }">
              {{ rowIndex + 1 }}
            </template>
          </a-table-column>
          <a-table-column
            :width="80"
            title="产品编号"
            data-index="productNumber"
            align="center"
          >
          </a-table-column>
          <a-table-column
            :width="80"
            title="产品名称"
            data-index="productName"
            align="center"
          >
          </a-table-column>
          <a-table-column
            :width="80"
            title="产品规格"
            data-index="spec"
            align="center"
          >
          </a-table-column>
          <a-table-column
            :width="80"
            title="已备货数量"
            data-index="itemAmount"
            align="center"
          >
          </a-table-column>
          <a-table-column
            :width="80"
            title="已发货数量"
            data-index="invoicedAmount"
            align="center"
          >
          </a-table-column>
          <a-table-column
            :width="80"
            title="本次发货数量"
            data-index="invoiceAmount"
            align="center"
          >
            <template #cell="{ record }">
              <a-input-number
                :min="1"
                v-model="record.invoiceAmount"
                :max="record.itemAmount - record.invoicedAmount"
              />
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, computed, ref, watchEffect, nextTick } from 'vue';
  import {
    getInvoiceOne,
    postInvoice,
  } from '@/api/inventory-management/outbound-management/sales-shipment-outbound/sales-outbound/index';

  const tableRef = ref();
  const OutboundVisible = ref(false);
  const OccupiedInfo = ref({});
  const props = withDefaults(
    defineProps<{
      id: number;
      visible: boolean;
    }>(),
    {
      visible: false,
    }
  );

  // 表格配置
  const args = reactive({
    stripe: true,
    bordered: {
      headerCell: true,
    },
    pagination: false,
    rowKey: 'id', // 批量选择按钮以客户名称来作为key
  });

  const emit = defineEmits(['update:visible', 'postInvoiceEdit']);
  const data = ref();
  const getData = async (page: any) => {
    try {
      const res = await getInvoiceOne({ id: props.id });
      data.value = res;
    } catch (err: unknown) {
      console.log(err);
    }
  };
  getData();
  const putOccupied = (val: any) => {
    OccupiedInfo.value = val;
    OutboundVisible.value = true;
  };

  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  // 取消
  const handleCancel = () => {
    modalVisible.value = false;
  };

  const handleOk = async () => {
    const newArr = data.value.filter((item) => item.invoiceAmount);
    emit('postInvoiceEdit', newArr);
    modalVisible.value = false;
  };

  // const changeInvoice = (e: number, val: any) => {
  //   // if(e,)
  // };

  //   const poductOccupiedEdit = async (val: any) => {
  //     const { id, Amount } = val;
  //     await putPoductOccupied({ id, occupiedAmount: Amount });
  //     tableRef.value.loadData();
  //   };

  //   const delOccupied = async (val: any) => {
  //     val.occupiedAmount = 0;
  //     const { id, occupiedAmount } = val;
  //     await putPoductOccupied({ id, occupiedAmount });
  //     tableRef.value.loadData();
  //   };
</script>

<style scoped lang="less">
  .demo-basic {
    margin-top: 5px;
    width: 500px;
    // margin: auto;
    background-color: aliceblue;
  }
</style>
